<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="修改密码"></u-navbar>
		<view class="d-p-30">
			<view class="card d-p-30">
				<u--form labelPosition="top" labelWidth="500rpx" :model="form" :rules="rules" ref="form1">
					<u-form-item label="旧密码" borderBottom><u--input v-model="form.password1" border="none" placeholder="请输入旧密码" password></u--input></u-form-item>
					<u-form-item label="新密码" borderBottom><u--input v-model="form.password2" border="none" placeholder="请输入新密码" password></u--input></u-form-item>
					<u-form-item label="再次输入新密码" borderBottom>
						<u--input v-model="form.re_password2" border="none" placeholder="请再次输入新密码" password></u--input>
					</u-form-item>
					<u-form-item label="请输入短信验证码">
						<view class="d-flex-1">
							<view class="d-font-26 d-p-t-10">
								<text style="color: #162233;">手机号：</text>
								<text class="u-m-l-20" style="color: #ADB4BD;">{{ $user.phone | phone }}</text>
							</view>
							<view class="d-flex d-font-26">
								<text style="color: #162233;">验证码：</text>
								<view class="d-flex-1 d-flex u-border-bottom" style="height: 80rpx;">
									<view class="d-flex-1"><u--input v-model="form.code" border="none" placeholder="请输入验证码" password></u--input></view>
									<view class="d-flex" @click="sendCode">
										<u-line direction="col" length="40rpx"></u-line>
										<text class="d-font-28 d-m-l-30" style="color: #18B29A;">{{ tips }}</text>
									</view>
								</view>
							</view>
						</view>
					</u-form-item>
				</u--form>
			</view>
		</view>

		<view class="bottom u-safe-area-inset-bottom">
			<view class="u-safe-area-inset-bottom d-flex d-row-center">
				<view style="width: 500rpx;"><u-button text="确认修改" @click="submit" shape="circle" type="primary"></u-button></view>
			</view>
		</view>
	</view>
</template>

<script>
import { sendCode, checkCode, savePwd } from '../../common/api.js';
export default {
	data() {
		return {
			form: {
				password1: '',
				password2: '',
				re_password2: '',
				code: ''
			},
			rules: [],
			tips: '获取验证码',
			down: 60,
			sms: {
				id: '',
				ywbh: '',
				messagecode: '',
				jssjh: ''
			},
			time: null
		};
	},
	onLoad() {},
	methods: {
		submit() {
			if (!this.form.password1) {
				return uni.$u.toast('请输入旧密码');
			}
			if (!this.form.password2) {
				return uni.$u.toast('请输入新密码');
			}
			if (!this.form.re_password2) {
				return uni.$u.toast('请输入再次输入新密码');
			}
			if (this.form.password2.length < 6) {
				return uni.$u.toast('新密码不得低于6为');
			}
			if (this.form.password2 != this.form.re_password2) {
				return uni.$u.toast('两次输入结果不一致,请查证再试!');
			}
			if (!this.form.code) {
				return uni.$u.toast('请输入验证码');
			}
			uni.showLoading({
				title: '提交中...',
				mask: false
			});
			checkCode({
				params: {
					id: this.sms.id,
					ywbh: this.sms.ywbh,
					shortMessage: this.form.code
				},
				custom: {
					noToken: true
				}
			})
				.then(e => {
					return true;
				})
				.catch(e => {
					uni.hideLoading();
					console.error(e);
					uni.$u.toast('验证码错误, 请查证后再试!');
				})
				.then(e => {
					if (e) {
						savePwd({
							params: {
								userId: this.$user.userId,
								password1: this.form.password1,
								password2: this.form.password2
							},
							custom: {
								noToken: true
							}
						})
							.then(e => {
								uni.hideLoading();
								uni.$u.toast('修改成功, 下次登录生效!');
								uni.$u.route({ type: 'back' });
							})
							.catch(e => {
								uni.hideLoading();
								console.error(e);
								uni.$u.toast('修改失败, 旧密码错误, 请查证后再试!');
							});
					}
				});
		},
		sendCode() {
			if (this.down == 60) {
				uni.showLoading({
					title: '正在发送中...',
					mask: false
				});
				sendCode(
					{
						ywbh: this.$user.acc,
						jssjh: this.$user.phone
					},
					{
						custom: {
							noToken: true
						}
					}
				)
					.then(e => {
						this.sms = e.data;
						this.time = setInterval(() => {
							if (this.down <= 1) {
								clearInterval(this.time);
								this.tips = '获取验证码';
								this.down = 60;
							} else {
								--this.down;
								this.tips = this.down + 's';
							}
						}, 1000);
						uni.hideLoading();
					})
					.catch(e => {
						uni.hideLoading();
						console.error(e);
						uni.$u.toast('验证码发送失败, 请稍后再试!');
					});
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background: #fbfcfc;
	.card {
		background: #ffffff;
		box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
	}

	.bottom {
		box-sizing: content-box;
		height: 120rpx;
		> view {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 120rpx;
		}
	}
}
</style>
